import React, {Component} from 'react';
import {withRouter} from "react-router-dom";
import {UserOutlined} from "@ant-design/icons";
import {Avatar, Button, Popover} from "antd";
import Notice from "../../Notice";
import './index.less'
import {reset} from "../../../redux/actions/shopCar";
import {connect} from "react-redux";
import Profile from "./Profile";
import {PubSub} from 'pubsub-js'
class UserIcon extends Component {
    render() {
        return (
            <div>
                {
                    this.show()
                }
            </div>
        );
    }
    showProfile = () => {
        PubSub.publish('showPro',true)
    }
    show = () => {
        if(sessionStorage.getItem('userId')){
            let nickName = sessionStorage.getItem('userNickName');
            let email = sessionStorage.getItem('userEmail');
            const content = (
                    <ul className='userInfo'>
                        <li>user: {nickName}</li>
                        <li>email: {email}</li>
                        <li>
                            <Button onClick={this.showProfile}>我的订单</Button>
                        </li>
                        <li>
                            <div className='userOut' onClick={this.userOut}>退出登录</div>
                        </li>
                    </ul>
            )
            return (
                <div>
                    <Popover placement="bottom" content={content}>
                        <Avatar  style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} className='user' />
                    </Popover>
                    <Profile/>
                </div>

            )
        }else {
            return (
                <Popover placement='bottom' content={(<div className='userInfo'>您还未登录<br/>请点击按钮登录！</div>)}>
                    <UserOutlined className='user' onClick={() => this.props.history.push('/login')}/>
                </Popover>
            )
        }
    }
    userOut = () => {
        sessionStorage.clear();
        this.props.reset()
        Notice('info','退出登录成功')
        //刷新一下组件显示
        this.setState({})
    }
}

export default withRouter(connect(state => state,{reset})(UserIcon));